<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-content">
        <img src="@/assets/images/login.png" alt="Login" class="login-logo" />
        <h1 class="welcome-text">欢迎登录</h1>
        
        <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form">
          <el-form-item prop="phoneNumber">
            <el-input 
              v-model="loginForm.phoneNumber" 
              placeholder="请输入账号"
              class="login-input"
              clearable
            />
          </el-form-item>
          
          <el-form-item prop="code">
            <div class="code-input-container">
              <el-input 
                v-model="loginForm.code" 
                placeholder="请输入密码"
                class="login-input code-input"
                clearable
                type="password"
              />
              <!-- <el-button 
                color="#1c1d29" 
                class="code-button"
                :disabled="isSending"
                @click="handleSendCode"
              >
                {{ smsButtonText }}
              </el-button> -->
            </div>
          </el-form-item>
          
          <el-form-item>
            <el-button
              class="login-button"
              :class="{ 'login-button-disabled': !isFormValid }"
              :disabled="!isFormValid"
              @click="handleLogin"
              :loading="loading"
              color="#1c1d29"
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { Phone, Lock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { getSmsCode } from '@/api/user'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()

// 登录表单
const loginFormRef = ref(null)
const loginForm = reactive({
  phoneNumber: '',
  code: ''
})

// 表单验证规则
const loginRules = {
  phoneNumber: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    // { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' }
  ]
}

// 判断表单是否有效
const isFormValid = computed(() => {
  return loginForm.phoneNumber && loginForm.code
})

// 发送验证码相关
const isSending = ref(false)
const countdown = ref(0)
const smsButtonText = ref('获取验证码')
let timer = null

// 发送验证码
const handleSendCode = async () => {
  // 验证手机号
  try {
    await loginFormRef.value.validateField('phoneNumber')
  } catch (error) {
    return
  }
  
  isSending.value = true
  
  try {
    await getSmsCode(loginForm.phoneNumber)
    ElMessage.success('验证码发送成功，请注意查收')
    
    // 开始倒计时
    countdown.value = 60
    smsButtonText.value = `重新发送(${countdown.value})`
    
    timer = setInterval(() => {
      countdown.value--
      smsButtonText.value = `重新发送(${countdown.value})`
      
      if (countdown.value <= 0) {
        clearInterval(timer)
        isSending.value = false
        smsButtonText.value = '获取验证码'
      }
    }, 1000)
  } catch (error) {
    isSending.value = false
  }
}

// 登录相关
const loading = ref(false)

// 登录
const handleLogin = async () => {
  // 表单验证
  try {
    await loginFormRef.value.validate()
  } catch (error) {
    return
  }
  
  loading.value = true
  
  try {
    await userStore.loginByPassword({
      username: loginForm.phoneNumber,
      password: loginForm.code
    })
    ElMessage.success('登录成功')
  } catch (error) {
    console.error('登录失败:', error)
    ElMessage.error('登录失败:' + error.message)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.login-container {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #F4F4F7;
}

.login-box {
  width: 600px;
  height: 637px;
  background-color: #FFFFFF;
  border-radius: 24px;
  box-shadow: 0px 4px 10px 0px #00000005;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.login-logo {
  width: 120px;
  height: auto;
  margin-bottom: 24px;
}

.welcome-text {
  font-family: "PingFang SC", sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: #212936;
  margin-bottom: 40px;
}

.login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-input {
  width: 456px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--color-line-1, #1F232914);
}

.login-input :deep(.el-input__inner) {
  color: var(--text-color-primary);
  text-align: left;
}

.code-input-container {
  display: flex;
  width: 456px;
  justify-content: space-between;
}

.code-input {
  flex-grow: 1;
  margin-right: 10px;
}

.code-button {
  height: 40px;
  border-radius: 8px;
  white-space: nowrap;
  background-color: #1C1D29;
  border-color: #1C1D29;
}

.code-button:hover {
  background-color: #2d2e3d;
  border-color: #2d2e3d;
}

.code-button:disabled {
  background-color: #A2A6B8;
  border-color: #A2A6B8;
}

.login-button {
  width: 456px;
  height: 46px;
  border-radius: 12px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  margin-top: 20px;
}

.login-button-disabled {
  background: #A2A6B8;
}

.login-button:hover:not(:disabled) {
  opacity: 0.9;
}

.login-button:disabled {
  background: #A2A6B8 !important;
  cursor: not-allowed;
  color: white !important;
  opacity: 1;
  }
  
:deep(.el-form-item) {
  margin-bottom: 20px;
}
</style> 